<template>
  <section class="ros-content">
      <div class="ros-title">ROS信息</div>
      <div v-for="(value, key) in ros_info" :key="key" class="item">
        <span class="label">{{ value.label }}：</span>
        <span class="text">{{ value.value }}</span>
      </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      ros_info: {
        ros_name: {label: "ROS主机名", value: "fsdafsd"},
        ros_config: {label: "ROS配置信息", value: "fafd"},
        ros_pub_ip: {label: "ROS出网IP", value: "10.123.22.3"},
        ros_pri_ip: {label: "ROS私网IP", value: "10.123.22.3"},
        ros_status: {label: "ROS运行状态", value: "正常"},
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.ros-content {
  background: #fff;
  border: 1px solid #e2e3e9;
  .ros-title {
    height: 36px;
    line-height: 36px;
    padding-left: 10px;
    font-size: 16px;
    font-weight: bold;
    background: #f5f6fa;
    border: 1px solid #e7e7e7;
    border-left: 4px solid #6d7781;
  }
  .item {
    height: 36px;
    line-height: 36px;
    padding-left: 20px;
    border-bottom: 1px solid #e2e3e9;
    .label {
      display: inline-block;
      width: 100px;
    }
  }
}
</style>